import hidden from '@/assets/svg/hidden.svg'
import show from '@/assets/svg/show.svg'
import { useState } from 'react'
import CopyText from '../CopyText'

type Info = {
  text: string
  title?: string
}

export default function Index(props: Info) {
  const [isShow, setIsShow] = useState<boolean>(false)
  const { text, title } = props
  const showText = text.replace(/./g, '*')
  return (
    <div
      style={{
        width: 'max(250px, 100%)',
        display: 'flex',
        justifyContent: 'space-between'
      }}
    >
      {text ? (
        <>
          <div>
            {isShow ? (
              <>
                <CopyText text={text} title={title} />
              </>
            ) : (
              <span>{showText}</span>
            )}
          </div>
          <img
            src={isShow ? show : hidden}
            onClick={() => setIsShow(!isShow)}
            style={{ width: '24px', cursor: 'pointer' }}
          />
        </>
      ) : (
        '------'
      )}
    </div>
  )
}
